<template>
	<div>
		<pre class="A-preview_txt" v-html="txt"></pre>
	</div>
</template>

<script>
	import { downFile } from '@/api/system/oss';
	export default {
		props: {
			src: {
				required: true,
			},
		},
		data() {
			return {
				txt: '',
			};
		},
		created() {
			if (this.src) {
				if (this.src.includes('blob:')) {
					this.url = this.src;
					return;
				}
				downFile(this.src)
					.then(res => {
						const reader = new FileReader();
						reader.onload = () => {
							this.txt = reader.result;
							this.rendered();
						};
						reader.onerror = () => {
							throw new Error();
						};
						reader.readAsText(res);
					})
					.catch(() => {
						this.error();
					});
			}
		},
		methods: {
			rendered() {
				this.$emit('rendered');
			},
			error() {
				this.$emit('error');
			},
		},
	};
</script>

<style lang="scss" scoped>
	.A-preview_txt {
		margin: 0;
		padding: 0;
		font: 14px sans-serif;
		background: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		margin: 26px auto 0;
		padding: 24px;
		position: relative;
		width: 90%;
		height: 100%;
		word-wrap: break-word;
		white-space: pre-wrap;
	}
	.A-preview_txt:before,
	.A-preview_txt:after {
		content: '';
		height: 98%;
		position: absolute;
		width: 100%;
		z-index: -1;
	}
	.A-preview_txt:before {
		background: #fafafa;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
		left: -5px;
		top: 4px;
		transform: rotate(-2.5deg);
	}
	.A-preview_txt:after {
		background: #f6f6f6;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
		right: -3px;
		top: 1px;
		transform: rotate(1.4deg);
	}
</style>
